<template>
  <div>
    <h1>用户中心</h1>
    <div id="drag" ref="drag">
      <input type="file" name="file" @change="handleFileChange" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: [],
    }
  },
  mounted() {
    this.bindEvent()
  },
  methods: {
    bindEvent() {
      const drag = this.$refs.drag
      drag.addEventListener('dragover', (e) => {
        drag.style.borderColor = 'red'
        e.preventDefault()
      })
      drag.addEventListener('dragleave', (e) => {
        drag.style.borderColor = '#eee'
        e.preventDefault()
      })
      drag.addEventListener('drop', (e) => {
        drag.style.borderColor = '#eee'
        const fileList = e.dataTransfer.files
        this.file = fileList[0]
        e.preventDefault()
      })
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
    },
  },
}
</script>

<style lang="scss" scoped>
#drag {
  height: 300px;
  border: 2px dashed #eee;
}
</style>
